<template>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <i class="icon-ziti"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(item,index) in  sizeData"
          :key="index"
          @click="setSize(item)"
          :disabled="item.value == sizeKey"
        >{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script>
import { defineComponent, reactive, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'topSize',
  setup() {
    const store = useStore()
    //主题
    const sizeKey = computed(() => store.getters.sizeKey)
    const sizeData = reactive([
      { label: '默认', value: 'default' },
      { label: '较大', value: 'large' },
      { label: '较小', value: 'small' },
    ])
    const setSize = (item) => {
      store.commit('SET_SIZE_KEY', item.value)
      setTimeout('window.location.reload()', 1000)
    }
    return {
      sizeData,
      sizeKey,
      setSize,
    }
  },
})
</script>
